<template>
  <div class="page9 wow" style="visibility: visible">
    <h2>近期资讯精选</h2>
    <h6>与您分享最新资讯</h6>
    <swiper :modules="modules" :pagination="pagination" @slideChange="onSlideChange">
      <swiper-slide>
        <div class="wrap">
          <img
            alt=""
            data-src="https://www.shbotao.net//uploads/allimg/20211130/3e7e7ae7bc6d1c7a12505e777d846459.png"
            src="https://www.shbotao.net//uploads/allimg/20211130/3e7e7ae7bc6d1c7a12505e777d846459.png"
            lazy="loaded"
          />
          <ul>
            <li class="item1">
              <div>
                <p>December</p>
                <h6>01-12</h6>
              </div>
              <div>
                <h3>专业 | 所以这一次我又选择了波涛</h3>
                <p>最新讯息</p>
              </div>
            </li>
            <li class="item2">
              <h3>真的有被这个儿童房惊艳到！</h3>
              <p><span>装修攻略</span> <span>19-06</span></p>
            </li>
            <li class="item2">
              <h3>佘山望| 地下空间如何引光入室？</h3>
              <p><span>装修攻略</span> <span>29-05</span></p>
            </li>
            <li class="item2">
              <h3>华府天地 | 现代质感，至简至纯</h3>
              <p><span>装修攻略</span> <span>16-05</span></p>
            </li>
            <li class="item2">
              <h3>千万别乱跟风，现代风格才是真的高级</h3>
              <p><span>装修攻略</span> <span>09-05</span></p>
            </li>
          </ul>
        </div>
      </swiper-slide>
      <swiper-slide>
        <div class="wrap">
          <img
            alt=""
            data-src="https://www.shbotao.net//uploads/allimg/20211130/3e7e7ae7bc6d1c7a12505e777d846459.png"
            src="https://www.shbotao.net//uploads/allimg/20211130/3e7e7ae7bc6d1c7a12505e777d846459.png"
            lazy="loaded"
          />
          <ul>
            <li class="item1">
              <div>
                <p>December</p>
                <h6>01-12</h6>
              </div>
              <div>
                <h3>专业 | 所以这一次我又选择了波涛</h3>
                <p>最新讯息</p>
              </div>
            </li>
            <li class="item2">
              <h3>真的有被这个儿童房惊艳到！</h3>
              <p><span>装修攻略</span> <span>19-06</span></p>
            </li>
            <li class="item2">
              <h3>佘山望| 地下空间如何引光入室？</h3>
              <p><span>装修攻略</span> <span>29-05</span></p>
            </li>
            <li class="item2">
              <h3>华府天地 | 现代质感，至简至纯</h3>
              <p><span>装修攻略</span> <span>16-05</span></p>
            </li>
            <li class="item2">
              <h3>千万别乱跟风，现代风格才是真的高级</h3>
              <p><span>装修攻略</span> <span>09-05</span></p>
            </li>
          </ul>
        </div>
      </swiper-slide>
      <div class="swiper-pagination pagin"></div>
    </swiper>
  </div>
</template>

<script setup>
import { Pagination, A11y } from 'swiper/modules'
import { Swiper, SwiperSlide } from 'swiper/vue'

import 'swiper/css'
import 'swiper/css/pagination'
import { ref } from 'vue'

const pagination = ref({
  el: '.pagin'
})
const modules = ref([Pagination, A11y])
</script>

<style>
.home .page9 {
  padding: 0 0.3rem 0.5rem;
  opacity: 0;
  animation: slide-down-in 1s, fade-in 1s;
  animation-fill-mode: forwards;
}

.home .page9 > h2 {
  width: 100%;
  font-size: 0.56rem;
  font-weight: 700;
  color: #000;
  line-height: 0.65rem;
}
.home .page9 h6 {
  margin-top: 0.25rem;
  font-size: 0.3rem;
  opacity: 0;
  animation: slide-down-in 2s, fade-in 1s;
  animation-fill-mode: forwards;
}
.home .page9 .swiper {
  background: #f4f4f4;
  margin-top: 0.55rem;
  position: relative;
}

.home .page9 .swiper .swiper-pagination {
  margin: 0;
  top: auto;
  bottom: 0.67rem;
}

.home .page9 .swiper .wrap img {
  cursor: pointer;
  height: 3.07rem;
  width: 100%;
}

.home .page9 .swiper .wrap ul {
  padding: 0.4rem;
}

.home .page9 .swiper .wrap .item1 {
  display: flex;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 0.01rem solid #dd292c;
  cursor: pointer;
}

.home .page9 .swiper .wrap .item1 div:first-child {
  width: 1.7rem;
  height: 1.7rem;
  background: #dd292c;
  display: flex;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  font-size: 0.24rem;
  font-weight: 400;
  color: #fff;
  flex-shrink: 0;
}

.home .page9 .swiper .wrap .item1 div:first-child p {
  width: 100%;
  text-align: center;
}

.home .page9 .swiper .wrap .item1 div:first-child h6 {
  width: 100%;
  text-align: center;
  font-size: 0.26rem;
  font-weight: 700;
}

.home .page9 .swiper .wrap .item1 div:nth-child(2) {
  flex: 1;
  padding-left: 0.5rem;
}

.home .page9 .swiper .wrap .item1 div:nth-child(2) h3 {
  font-size: 0.3rem;
  font-weight: 700;
  color: #000;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.home .page9 .swiper .wrap .item1 div:nth-child(2) p {
  margin-top: 0.23rem;
  font-size: 0.24rem;
  font-weight: 400;
  color: #888;
}

.home .page9 .swiper .wrap .item2 {
  padding: 0.38rem 0;
  border-bottom: 0.01rem solid #dd292c;
  cursor: pointer;
}

.home .page9 .swiper .wrap .item2 h3 {
  font-size: 0.28rem;
  font-weight: 700;
  color: #000;
  margin-bottom: 0.19rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home .page9 .swiper .wrap .item2 p {
  display: flex;
  justify-content: space-between;
  font-size: 0.24rem;
  font-weight: 400;
  color: #888;
  margin-top: 0.19rem;
}
</style>